<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.contractCode"
        placeholder="合同编号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="btnQuery"
      />
      <el-select v-model="listQuery.contractState" clearable placeholder="合同状态">
        <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input v-model="listQuery.contractComment" placeholder="合同备注" style="width: 200px;" class="filter-item" @keyup.enter.native="btnQuery" />
      <el-input
        v-model="listQuery.invoice"
        placeholder="发票"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="btnQuery"
      />
      <el-input
        v-model="listQuery.aogSituation"
        placeholder="到货情况"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="btnQuery"
      />
      <el-select v-model="listQuery.paymentWay" clearable placeholder="付款方式">
        <el-option v-for="item in paymentWayOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="listQuery.paymentSituation" clearable placeholder="付款状态">
        <el-option
          v-for="item in paymentStateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="listQuery.paymentApprovalState" clearable placeholder="付款审批状态">
        <el-option
          v-for="item in paymentApprovalStateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        v-model="paymentDateRange"
        type="daterange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="付款开始日期"
        end-placeholder="付款结束日期"
        :picker-options="pickerOptions"
      />
      <el-input v-model="listQuery.paymentComment" placeholder="付款备注" style="width: 200px;" class="filter-item" @keyup.enter.native="btnQuery" />
      <el-select v-model="listQuery.hasAttachment" clearable placeholder="有无附件">
        <el-option v-for="item in hasAttachmentOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-dropdown split-button type="primary" class="filter-item" @click="btnQuery">
        <i class="el-icon-search el-icon--left" />查询
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset">重置</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button-group>
        <el-button
          v-permission="'purchase:contract:save'"
          icon="el-icon-plus"
          type="primary"
          class="filter-item"
          @click="btnCreate"
        >新增
        </el-button>
        <el-button
          v-permission="'purchase:contract:delete'"
          icon="el-icon-delete"
          class="filter-item"
          @click="btnDelete()"
        >批量删除
        </el-button>
        <el-button type="primary" class="filter-item" @click="btnGen()">合并订单</el-button>
      </el-button-group>
    </div>
    <el-table
      ref="multipleTable"
      :data="records"
      border
      fit
      highlight-current-row
      :row-class-name="tableRowClassName"
      style="width: 100%;"
      :cell-style="{padding:'3px'}"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column label="合同编号" prop="contractCode" align="center" width="100px" fixed>
        <template slot-scope="scope"><span>{{ scope.row.contractCode }}</span></template>
      </el-table-column>
      <el-table-column label="供应商" prop="supplierName" align="center" width="120px" fixed>
        <template slot-scope="scope"><span>{{ scope.row.supplierName }}</span></template>
      </el-table-column>
      <el-table-column label="项目（用途）" prop="projectName" align="center">
        <template slot-scope="scope"><span>{{ scope.row.projectName }}</span></template>
      </el-table-column>
      <el-table-column label="合同金额" prop="contractAmount" align="center">
        <template slot-scope="scope"><span>{{ scope.row.contractAmount }}</span></template>
      </el-table-column>
      <el-table-column label="合同状态" prop="contractState" align="center">
        <template slot-scope="scope"><span>{{ scope.row.contractState }}</span></template>
      </el-table-column>
      <el-table-column label="到货情况" prop="aogSituation" align="center">
        <template slot-scope="scope"><span>{{ scope.row.aogSituation }}</span></template>
      </el-table-column>
      <el-table-column label="发票" prop="invoice" align="center">
        <template slot-scope="scope"><span>{{ scope.row.invoice }}</span></template>
      </el-table-column>
      <el-table-column label="付款方式" prop="paymentWay" align="center" width="100px">
        <template slot-scope="scope"><span>{{ scope.row.paymentWay }}</span></template>
      </el-table-column>
      <el-table-column label="付款情况" prop="paymentSituation" align="center" width="400px">
        <template slot-scope="scope"><span style="white-space:pre-line">{{ scope.row.paymentSituation }}</span>
        </template>
      </el-table-column>
      <el-table-column label="附件数量" prop="attachmentNum" align="center" width="50px">
        <template slot-scope="scope"><span style="white-space:pre-line">{{ scope.row.attachmentNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="contractComment" align="center">
        <template slot-scope="scope"><span>{{ scope.row.contractComment }}</span></template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120px" fixed="right">
        <template slot-scope="{row}">
          <el-button-group style="float: left;">
            <el-button type="text" @click.native="btnView(row)">查看</el-button>
            <el-button
              v-permission="'purchase:contract:update'"
              style="margin-left: 5px"
              type="text"
              divided
              @click.native="btnUpdate(row)"
            >修改
            </el-button>
            <el-button
              v-permission="'purchase:contract:delete'"
              style="margin-left: 5px"
              type="text"
              divided
              @click.native="btnDelete(row.id)"
            >删除
            </el-button>
            <el-button
              v-permission="'purchase:file:list'"
              style="margin-left: 5px"
              type="text"
              divided
              @click.native="btnFileView(row.id)"
            >附件
            </el-button>
            <el-button
              v-permission="'purchase:file:list'"
              style="margin-left: 5px"
              type="text"
              divided
              @click.native="btnPaymentOrder(row)"
            >付款单
            </el-button>
            <el-button
              style="margin-left: 5px"
              type="text"
              divided
              @click.native="btnIndent(row)"
            >采购订单
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :current.sync="listQuery.current"
      :size.sync="listQuery.size"
      @pagination="list"
    />

    <contract-detail ref="contractDetailRef" :dialog-status="dialogStatus" @handleChild="handleChild" />
    <gen-contract ref="genContractRef" />

    <payment-order ref="paymentOrderRef" />
    <indent-order ref="indentOrderRef" />
    <el-dialog
      ref="dialogRef"
      custom-class="selfDialog"
      :visible.sync="dialogVisible"
      width="80%"
      title="附件"
    >
      <file-list
        ref="contractFiles"
        :query-file-param="queryFileTemp"
      />
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="confirmDialogVisible"
      width="30%"
    >
      <span>确定删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doDelete()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<script>
import Pagination from '@/components/Pagination'
import { deleteAction, getAction } from '@/api/manage'
import { Message } from 'element-ui'
import fileList from '@/views/purchase/file/components/fileList'
import contractDetail from '@/views/purchase/contract/contractDetail'
import paymentOrder from '@/views/purchase/contract/paymentOrder'
import indentOrder from '@/views/purchase/contract/indentOrder'
import genContract from '@/views/purchase/contract/genContract'

export default {
  name: 'PurchaseContract',
  components: { Pagination, fileList, contractDetail, paymentOrder, indentOrder, genContract },
  data() {
    return {
      dialogVisible: false,
      queryFileTemp: {
        contractId: ''
      },
      deleteIds: [],
      confirmDialogVisible: false,
      records: null,
      selectedRecords: [],
      total: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      stateOptions: [{
        value: '未到合同',
        label: '未到合同'
      }, {
        value: '已到合同',
        label: '已到合同'
      }, {
        value: '完成',
        label: '完成'
      }],
      paymentWayOptions: [{
        value: '预付100%',
        label: '预付100%'
      }, {
        value: '到货付30%，使用6个月付60%，1年后付10%',
        label: '到货付30%，使用6个月付60%，1年后付10%'
      }, {
        value: '到货付100%',
        label: '到货付100%'
      }, {
        value: '垫付',
        label: '垫付'
      }, {
        value: '其他',
        label: '其他'
      }],
      hasAttachmentOptions: [{
        value: '1',
        label: '有附件'
      }, {
        value: '0',
        label: '无附件'
      }
      ],
      paymentStateOptions: [{
        value: '待付款',
        label: '待付款'
      }, {
        value: '待报销',
        label: '待报销'
      }, {
        value: '已完成',
        label: '已完成'
      }
      ],
      paymentApprovalStateOptions: [{
        value: '审批中',
        label: '审批中'
      }, {
        value: '审批通过',
        label: '审批通过'
      }, {
        value: '交财务',
        label: '交财务'
      }],
      paymentDateRange: ['', ''],
      listQuery: {
        current: 1,
        size: 10,
        contractCode: undefined,
        contractState: '',
        contractName: undefined,
        contractComment: '',
        invoice: undefined,
        aogSituation: undefined,
        paymentWay: undefined,
        paymentSituation: undefined,
        paymentState: '',
        paymentApprovalState: '',
        paymentStartDate: '',
        paymentEndDate: '',
        paymentComment: '',
        hasAttachment: ''
      },
      dialogStatus: ''
    }
  },
  beforeCreate() {

  },
  created() {
    this.list()
  },
  methods: {
    handleChild(data) {
      const fns = {
        contractUpdated() {
          this.list()
        }
      }
      return fns[data.type] && fns[data.type].call(this)
    },
    list() {
      if (this.paymentDateRange !== undefined && this.paymentDateRange !== null && this.paymentDateRange.length === 2) {
        this.listQuery.paymentStartDate = this.paymentDateRange[0]
        this.listQuery.paymentEndDate = this.paymentDateRange[1]
      } else {
        this.listQuery.paymentStartDate = ''
        this.listQuery.paymentEndDate = ''
      }
      getAction('/purchase/contract/list', this.listQuery).then(res => {
        const { data } = res
        this.records = data.records
        this.total = data.total
      })
    },
    btnQuery() {
      this.listQuery.current = 1
      this.list()
    },
    btnReset() {
      this.listQuery = {
        current: 1,
        size: 10,
        contractCode: undefined,
        contractName: undefined,
        contractState: ''
      }
      this.list()
    },
    btnView(row) {
      this.dialogStatus = 'view'
      this.$refs.contractDetailRef.show(row.id)
    },
    btnCreate() {
      this.dialogStatus = 'create'
    },
    btnUpdate(row) {
      this.dialogStatus = 'update'
      this.$refs.contractDetailRef.show(row.id)
    },
    btnGen() {
      this.$refs.genContractRef.show()
    },
    btnDelete(id) {
      const ids = id ? [id] : this.selectedRecords.map(record => {
        return record.id
      })
      if (ids.length === 0) {
        Message.error('请选择要删除的记录')
        return
      }
      this.deleteIds = ids
      this.confirmDialogVisible = true
    },
    doDelete() {
      deleteAction('/purchase/contract/delete', {
        ids: this.deleteIds.toString()
      }).then(({
        msg
      }) => {
        Message.success(msg)
        this.confirmDialogVisible = false
        this.list()
      })
    },
    selectionChange(selectedRecords) {
      this.selectedRecords = selectedRecords
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.contractState === '完成') {
        return 'success-row'
      } else if (row.contractState === '已到合同') {
        return 'warning-row'
      }
      return ''
    },
    btnFileView(contractId) {
      this.queryFileTemp.contractId = contractId
      this.dialogVisible = true
      if (this.$refs.contractFiles !== undefined) {
        this.$refs.contractFiles.getlistFile()
      }
    },
    btnPaymentOrder(row) {
      this.$refs.paymentOrderRef.btnPaymentOrder(row)
    },
    btnIndent(row) {
      this.$refs.indentOrderRef.btnIndent(row)
    }
  }
}
</script>
